<template>
	<view style="background-color: #E6E6E6; padding-top: calc(2vh);" class="common-text-size">
		<view class="head back">
			<view class="head-title">
				<text class="big-common-text-size"><b>账户余额</b></text><br>
				<p style="margin-top: calc(2vh);">可提现余额：0.00元</p>
			</view>
		</view>
		<view class="price back">
			<text><b>金额（元）</b></text><br>
			<view>
				<input type="number" v-model="money" placeholder="可提现0.00元" @input="onChange" />
				<p style="color: #007AFF;">全部</p>
			</view>
		</view>
		<view class="form back">
			<text><b>收款账户</b></text>
			<view>
				<image class="item" src="../../../static/alipaylogo.png" mode="widthFix"></image>
				<text class="small-common-text-size item2 text-color">未绑定</text>
				<uni-icons class="item" type="forward" size="24"></uni-icons>
			</view>
		</view>
		<view class="opt">
			<button :class="active?'back-active':'back-none'">
				<text class="common-text-size">确定</text>
			</button>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				money: '',
				active: false,
			}
		},
		methods: {
			onChange(e) {
				let value = e.detail.value;
				if (value > 0) {
					this.active = true;
				} else {
					this.active = false;
				}
			}
		}
	}
</script>

<style>
	@import url("/static/css/common.css");

	.opt {
		width: calc(96vw);
		margin: 0 calc(2vw) 0 calc(2vw);
	}

	.opt button {
		margin: calc(5vh) calc(5vw) calc(10vh) calc(5vw);
		color: #FFFFFF;
		border-radius: calc(10vw);
	}

	.form {
		display: flex;
		justify-content: space-between;
		padding: 0 calc(2vw) 0 calc(2vw);
		width: calc(90vw);
		margin: 0 calc(3vw) 0 calc(3vw);
		height: calc(6vh);
		line-height: calc(6vh);
		border-radius: calc(1vw);
	}

	.form view {
		width: calc(30vw);
		display: flex;
	}

	.form image {
		width: calc(5vw);
		height: calc(5vw);
		margin: calc(1vh) calc(1vw) 0 0;
	}

	.price p {
		margin-top: calc(3vh);
	}

	.price input {
		margin-top: calc(2vh);
		height: calc(4vh);
		font-size: calc(4vw);
	}

	.price view {
		display: flex;
		justify-content:
			space-between;
		border-bottom: #E6E6E6 1px solid;
		padding-bottom: calc(1vh);
	}

	.price {
		width: calc(90vw);
		height: calc(20vh);
		margin: calc(1vh) calc(3vw) calc(1vh) calc(3vw);
		padding: calc(3vh) calc(2vw) calc(1vh) calc(2vw);
		border-radius: calc(1vw);
	}

	.head {
		width: calc(90vw);
		margin: 0 calc(3vw) 0 calc(3vw);
		padding: calc(2vw);
		border-radius: calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}

	.back-active {
		background-color: #55aaff;
	}

	.back-none {
		background-color: #d8d8d8;
	}

	.text-small {
		font-size: small;
	}

	.text-color {
		color: #999999;
	}

	.item {
		flex: 1;
	}

	.item2 {
		flex: 2;
	}

	.item3 {
		flex: 3;
	}
</style>
